<template>
  <!-- 新品首发 -->
  <div class="New-products">
    <div class="New-head">
      <h3>新品首发</h3>
      <span>为你寻觅世间好物</span>
      <a href="##"><span>更多新品 ></span></a>
    </div>

    <!-- 轮播图 -->
    <div class="swiper-container new-swiper" id="mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in 20" :key="item">
          <!-- 一个新品展示 -->
          <div class="show-new">
            <div class="show-img">
              <img
                src="https://yanxuan-item.nosdn.127.net/6fa0d9f463b38e8670d664f3e086d05e.png?type=webp&quality=95&thumbnail=265x265&imageView"
              />
            </div>
            <div class="describe">
              <router-link to="detail"><span>严选黑猪鲜肉包300g*4(48个)</span> </router-link>
              <p>￥99 <span>￥129</span></p>
            </div>
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  name: "NewProducts",

  mounted() {
    new Swiper(".new-swiper", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      // pagination: {
      //   el: ".swiper-pagination",
      // },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      slidesPerView: 4,
      slidesPerGroup: 4,
      speed: 800,
    });
  },
};
</script>

<style lang="less" scoped>
//新品首发
.New-products {
  width: 1090px;
  height: 520px;
  margin: 0 auto;
  margin-top: 30px;

  //新品首发头
  .New-head {
    position: relative;
    margin-bottom: 20px;
    h3 {
      display: inline-block;
      font-size: 28px;
      color: #333;
      cursor: pointer;
      margin-right: 20px;

      &:hover {
        color: #b4a078;
        // font-size: 100px;
      }
    }

    span {
      font-size: 14px;
    }

    a {
      position: absolute;
      right: 0;
      text-decoration: none;

      span {
        height: 100%;
        line-height: 50px;
        font-size: 14px;
        color: #333;
        &:hover {
          color: #b4a078;
        }
      }
    }
  }

  //轮播图
  .swiper-container {
    width: 100%;
    height: 365px;

    //一个新品
    .show-new {
      width: 265px;
      height: 100%;

      &:hover {
        background-color: #f4f0ea;
      }

      //新品图片
      .show-img {
        width: 265px;
        height: 265px;
        background-color: #f4f4f4;
      }

      //新品描述
      .describe {
        height: 92px;

        a {
          text-decoration: none;

          span {
            display: block;
            width: 160px;
            text-align: center;
            height: 39px;
            font-size: 13px;
            margin: 0 auto;
            margin-top: 20px;
            font-weight: 600;
            color: #333;
            &:hover {
              color: #b4a078;
            }
          }
        }

        p {
          font-size: 13px;
          color: #d4282d;
          text-align: center;

          span {
            display: inline;
            color: #999;
            text-decoration: line-through;
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>
